<template>
  <div class="my-message-container">
    <div class="page-header">
      <div class="header-title">
        <h2>我的消息</h2>
      </div>
      <div class="header-actions">
        <el-button type="primary" @click="handleReadAll" :loading="readAllLoading">
          全部已读
        </el-button>
      </div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-container">
      <el-form :model="queryParams" inline>
        <el-form-item label="消息状态">
          <el-select v-model="queryParams.isRead" placeholder="请选择消息状态" clearable style="width: 150px;">
            <el-option label="未读" :value="0" />
            <el-option label="已读" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="消息类型">
          <el-select v-model="queryParams.type" placeholder="请选择消息类型" clearable style="width: 150px;">
            <el-option label="评论审核通过" :value="MessageEnum.REVIEW_AUDIT_PASS" />
            <el-option label="评论审核未通过" :value="MessageEnum.REVIEW_AUDIT_NOT_PASS" />
            <el-option label="点赞" :value="MessageEnum.LIKE" />
          </el-select>
        </el-form-item>
        <el-form-item label="接收时间">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcuts"
            value-format="YYYY-MM-DD"
            style="width: 320px;"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 消息列表 -->
    <div class="message-list" v-loading="loading">
      <template v-if="messageList.length > 0">
        <div
          v-for="item in messageList"
          :key="item.id"
          class="message-item"
          :class="{ 'unread': item.isRead === 0 }"
        >
          <div class="message-content">
            <div class="message-header">
              <div class="message-title-row">
                <div class="message-title">{{ item.title }}</div>
                <el-tag 
                  size="small" 
                  :type="item.isRead === 0 ? 'warning' : 'info'"
                  class="message-status"
                >
                  {{ item.isRead === 0 ? '未读' : '已读' }}
                </el-tag>
              </div>
            </div>
            <div class="message-info">
              <el-tag 
                size="small" 
                type="success" 
                effect="plain"
                class="message-type"
              >
                {{ getTypeLabel(item.type) }}
              </el-tag>
              <div class="message-desc">{{ item.content }}</div>
            </div>
            <div class="message-footer">
              <span class="publish-time">{{ item.publishTime }}</span>
              <div class="action-buttons">
                <el-button
                  v-if="useNeedSettleMessage(item.type)"
                  type="primary"
                  link
                  @click="handleSettleMessage(item)"
                >
                  去处理
                </el-button>
                <el-button
                  v-if="item.isRead === 0"
                  type="primary"
                  link
                  @click="handleReadMessage(item.id)"
                >
                  标记已读
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </template>
      <el-empty v-else description="暂无消息" />
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { MessageAPI } from '@/api/message';
import type { Message, MessagePageQuery } from '@/api/message';
import { Message2Router, useNeedSettleMessage, getTypeLabel, MessageEnum } from "@/enums/MessageEnum";
import router from '@/router';

// 查询参数
const queryParams = reactive<Partial<MessagePageQuery>>({
  pageNum: 1,
  pageSize: 10,
  isRead: undefined,
  type: undefined,
  publishTimeStart: '',
  publishTimeEnd: '',
});

// 日期范围
const dateRange = ref<[string, string] | null>(null);

// 日期快捷选项
const dateShortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];

const messageList = ref<Message[]>([]);
const total = ref(0);
const loading = ref(false);
const readAllLoading = ref(false);

// 获取消息列表
const getMessageList = async () => {
  try {
    loading.value = true;
    queryParams.publishTimeStart = dateRange.value?.[0] || '';
    queryParams.publishTimeEnd = dateRange.value?.[1] || '';
    const res = await MessageAPI.page(queryParams);
    messageList.value = res.records;
    total.value = res.total;
  } catch (error) {
    console.error('获取消息列表失败:', error);
    ElMessage.error('获取消息列表失败');
  } finally {
    loading.value = false;
  }
};

// 标记消息已读
const handleReadMessage = async (id: number) => {
  try {
    await MessageAPI.updateIsRead(id);
    ElMessage.success('已标记为已读');
    getMessageList();
  } catch (error) {
    console.error('标记已读失败:', error);
    ElMessage.error('标记已读失败');
  }
};

// 全部标记已读
const handleReadAll = async () => {
  try {
    readAllLoading.value = true;
    await MessageAPI.updateAllIsRead();
    ElMessage.success('已全部标记为已读');
    getMessageList();
  } catch (error) {
    console.error('标记全部已读失败:', error);
    ElMessage.error('标记全部已读失败');
  } finally {
    readAllLoading.value = false;
  }
};

// 处理消息
const handleSettleMessage = (message: Message) => {
  router.push(Message2Router[message.type]);
};

// 搜索
const handleSearch = () => {
  queryParams.pageNum = 1;
  getMessageList();
};

// 重置
const handleReset = () => {
  queryParams.isRead = undefined;
  queryParams.type = undefined;
  queryParams.publishTimeStart = '';
  queryParams.publishTimeEnd = '';
  queryParams.pageNum = 1;
  dateRange.value = null;
  getMessageList();
};

// 分页大小改变
const handleSizeChange = (val: number) => {
  queryParams.pageSize = val;
  queryParams.pageNum = 1;
  getMessageList();
};

// 页码改变
const handleCurrentChange = (val: number) => {
  queryParams.pageNum = val;
  getMessageList();
};

// 处理日期范围变化
const handleDateRangeChange = (val: [string, string] | null) => {
  if (val) {
    queryParams.publishTimeStart = val[0];
    queryParams.publishTimeEnd = val[1];
  } else {
    queryParams.publishTimeStart = '';
    queryParams.publishTimeEnd = '';
  }
};

onMounted(() => {
  getMessageList();
});
</script>

<style lang="scss" scoped>
.my-message-container {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  min-height: calc(100vh - 48px);

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;

    .header-title {
      h2 {
        margin: 0;
        font-size: 20px;
        font-weight: 500;
        color: #333;
      }

      .desc {
        margin-top: 8px;
        font-size: 14px;
        color: #666;
      }
    }
  }

  .filter-container {
    margin-bottom: 24px;
    padding: 16px 24px;
    background: #fafafa;
    border-radius: 4px;

    :deep(.el-form-item) {
      margin-bottom: 0;
      margin-right: 24px;

      &:last-child {
        margin-right: 0;
      }
    }

    :deep(.el-date-editor) {
      .el-range-separator {
        padding: 0 4px;
      }
    }
  }

  .message-list {
    min-height: 300px;
  }

  .message-item {
    padding: 24px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s;

    &:hover {
      background: #fafafa;
    }

    &.unread {
      .message-title {
        color: #1890ff;
        font-weight: 500;
      }
    }
  }

  .message-content {
    padding: 0 24px;

    .message-header {
      margin-bottom: 12px;

      .message-title-row {
        display: flex;
        align-items: flex-start;
        gap: 16px;
      }

      .message-title {
        font-size: 16px;
        color: #333;
        flex: 1;
        line-height: 24px;
        text-align: left;
      }

      .message-status {
        flex-shrink: 0;
        margin-top: 2px;
      }
    }

    .message-info {
      margin-bottom: 16px;
      text-align: left;

      .message-type {
        margin-bottom: 8px;
        :deep(.el-tag) {
          text-align: left;
        }
      }

      .message-desc {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
      }
    }

    .message-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 16px;
      border-top: 1px solid #f5f5f5;

      .publish-time {
        font-size: 13px;
        color: #999;
      }

      .action-buttons {
        display: flex;
        gap: 24px;

        :deep(.el-button) {
          font-size: 14px;
          padding: 0;
          height: auto;
          
          &:hover {
            color: #40a9ff;
          }
        }
      }
    }
  }

  .pagination-container {
    margin-top: 24px;
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
  }
}

@media screen and (max-width: 768px) {
  .my-message-container {
    padding: 16px;

    .page-header {
      flex-direction: column;
      gap: 16px;
      padding-bottom: 12px;

      .header-actions {
        align-self: flex-start;
      }
    }

    .filter-container {
      padding: 12px 16px;

      :deep(.el-form-item) {
        margin-bottom: 12px;
        margin-right: 0;
        width: 100%;

        .el-form-item__content {
          width: 100%;

          .el-select,
          .el-date-editor {
            width: 100% !important;
          }
        }
      }

      :deep(.el-form-item:last-child) {
        margin-bottom: 0;
        
        .el-form-item__content {
          display: flex;
          gap: 12px;
          
          .el-button {
            flex: 1;
          }
        }
      }
    }

    .message-item {
      padding: 16px 0;
    }

    .message-content {
      padding: 0 16px;

      .message-header {
        margin-bottom: 8px;

        .message-title-row {
          gap: 12px;
        }
      }

      .message-info {
        margin-bottom: 12px;

        .message-type {
          margin-bottom: 6px;
        }

        .message-desc {
          font-size: 13px;
        }
      }

      .message-footer {
        padding-top: 12px;

        .action-buttons {
          gap: 16px;
        }
      }
    }

    .pagination-container {
      margin-top: 16px;
      padding: 12px 16px;
    }
  }
}
</style> 